<template>
  <basic-container :btnFlag=true>
    <div style="border: 1px solid #d2d2d2;">
      <card-header :header-data="headerData"></card-header>
      <transition name="fade1">
        <div v-if="!showall">
          <div :class="{showall:true,active:showall}">
            <bostech-detail :detail-data="detailData"></bostech-detail>
          </div>
        </div>
      </transition>
      <transition name="fade">
        <div v-if="showall">
          <div :class="{showall:true,active:showall}">
            <bostech-detail :detail-data="detailData"></bostech-detail>
          </div>
        </div>
      </transition>
      <div class="collapse-title" :class="{active:showall}" @click="showall=!showall">
        <img v-if="!showall" :src="`${publicPath}img/packdown.png`" class="collapse-title-img">
        <p v-if="!showall" class="collapse-title-text">展开更多</p>
        <img v-if="showall" :src="`${publicPath}img/packUp.png`" class="collapse-title-img">
        <p v-if="showall" class="collapse-title-text">收起</p>
      </div>
      <div>
        <div
          style="padding-top: 19px;
                padding-left: 10px;
                padding-bottom: 7px;
                font-weight: 600;">
          历史反馈意见
        </div>
        <div class="chatbox">
          <msglevy-reply :msg-data="msgDataList" v-if="msgFlag"></msglevy-reply>
          <div v-if="!msgFlag" style="text-align: center;
                                      font-size: 18px;
                                      color: #3333;
                                      height: 300px;
                                      line-height: 300px;">
            暂无数据
          </div>
          <div style="margin-bottom: 30px;">
            <el-pagination
              @size-change="sizeChange"
              @current-change="onLoad"
              :current-page="page.currentPage"
              :page-size="page.pageSize"
              :total="page.total"
              :page-sizes="[10, 20, 30, 40 ,50 ,100]"
              layout="total, sizes, prev, pager, next, jumper"
              v-if="msgFlag"
              class="paginationcss">
            </el-pagination>
          </div>
        </div>
      </div>
      <div style="margin-top:20px;margin-left: 10px;" v-if="detail == 'false'">
        <p class='pr'>
          回复：
          <em></em>
          <textarea style='height:80px;width:749px;border: 1px solid #d2d2d2;border-radius:5px;'
                    v-model="feedBackContent"></textarea>
        </p>
      </div>
      <div class="form-group form-padding" style="margin-bottom: 4rem;margin-top: 0rem;" v-if="detail == 'false'">
        <span class="form-label-small" style="float: left;margin-right: -49px;font-size: 16px">附件:</span>
        <el-upload
          class="upload-demo"
          ref="upload"
          :limit="1"
          :on-exceed="tipFileOne"
          action="string"
          :http-request="submitUpload"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :file-list="fileList"
          :auto-upload="true"
          :on-change="fileChange">
          <el-button slot="trigger" size="small" type="primary">点击上传</el-button>
        </el-upload>
      </div>
      <div style="text-align: center; margin-top: 40px;margin-bottom: 40px;" v-if="detail == 'false'">
        <el-button type="warning" @click.stop="sendMessage()">发送</el-button>
        <el-button type="info" @click.stop="goBack()">关闭</el-button>
      </div>
    </div>
  </basic-container>
</template>
<script>
  import chatMsg from '@/components/bostech/chat-msg'
  import msgNobtn from '@/components/bostech/msg-nobtn';
  import msglevyReply from '@/components/bostech/msglevy-reply';
  import {topicDetail, topicMessage, messagePage, registerinfoBytopic} from '@/api/planning/message'
  import {mapGetters} from "vuex";
  import {PROJECT_DIC} from '@/const/dict';
  import {filedownload, UploadFile, getfileinfo} from "@/api/system";
  import {subjectReportOpnDetail} from "@/api/subject";
  import {newslevyMessage, levymessagePage} from "@/api/planning/news";
  import MsglevyReply from "@/components/bostech/msglevy-reply";

  export default {
    name: "planFeedback",
    components: {
      MsglevyReply,
      chatMsg,
      msgNobtn,
      msglevyReply
    },
    data() {
      return {
        publicPath: process.env.BASE_URL,
        headerData: {
          title: '课题报告征集意见反馈'
        },
        msgDataList: [],//consultMsg组件内容？
        detailData: [],//class="collapse-title内容？
        showall: false,
        feedBackContent: '',//反馈内容
        registerTitle: '',//当前规划名称
        msgFlag: false,
        fileId: null,
        filenametemp: '',
        fileList: [],
        filenametemp1: '',
        msgListtemp: [],
        detail: false,
        page: {
          total: 0, // 总页数
          currentPage: 1, // 当前页数
          pageSize: 10 // 每页显示多少条
        },
        contentId: 0,
      };
    },
    created: function () {
      this.detail = 'false';
      this.init();
    },
    computed: mapGetters([
      "userInfo"
    ]),
    watch: {
      msgDataList(val) {
        if (val && val.length > 0) {
          this.msgFlag = true
        } else {
          this.msgFlag = false
        }
      }
    },
    methods: {
      async init() {
        await subjectReportOpnDetail(this.$route.params.id).then(response => {
          if (response.data.code == 0) {
            var record = response.data.data;
            this.detailData = [
              {label: '征集名称', value: record.title},
              {label: '征集要求', value: record.txt},
              {label: '征集人', value: record.nickname},
            ];
            this.contentId = record.contentId;
          }
        });
        this.getMessage()
      },
      getMessage() {
        levymessagePage(Object.assign({
          current: 1,// 当前页数
          size: this.page.pageSize,// 每页显示多少条
          contentId: this.contentId,
        })).then(response => {
          if (response.data.code == 0) {
            var record = response.data.data.records;
            this.page.currentPage = response.data.data.current;
            this.page.pageSize = response.data.data.size;
            this.page.total = response.data.data.total;
            this.putList(record);
          }
        })
      },
      putList(record) {
        this.msgListtemp = [];
        this.recursive(record);    //递归消息放入消息列msgListtemp中
        this.msgDataList = this.msgListtemp
      },
      recursive(record) {
        for (var i in record) {
          //判断是否是当前用户的消息，只显示当前用户的消息
          var flag = false;
          if (record[i].senderId == this.userInfo.userId) {
            flag = true
          }
          if (record[i].parentId !== null) {
            var righttemp = 1;     //是子消息
          } else {
            righttemp = 0;     //不是子消息
          }
          var msgDataMap = {
            orgName: record[i].senderNickname,
            nickName: record[i].senderNickname ? record[i].senderNickname.substring(0, 2) : '',
            msgTime: record[i].sendTime,
            msgContent: record[i].content,
            replyFlag: flag,
            senderId: record[i].senderId,
            contentId: record[i].contentId,
            messageId: record[i].messageId,
            rightaway: righttemp,
            fileId: record[i].fileId,
            filenametemp: record[i].fileFullName,
          };
          this.msgListtemp.push(msgDataMap);
          if (record[i].children !== null) { //当还有子消息时继续递归
            this.recursive(record[i].children);
          }
        }
      },

      //消息分页
      onLoad(val) {
        messagePage(Object.assign({
          current: val,// 当前页数
          size: this.page.pageSize,// 每页显示多少条
          contentId: this.contentId,
          ascs: 'send_time'
        })).then(response => {
          if (response.data.code == 0) {
            var record = response.data.data.records;
            this.page.currentPage = response.data.data.current;
            this.page.pageSize = response.data.data.size;
            this.page.total = response.data.data.total;
            this.putList(record);
          }
        })
      },
      sizeChange(val) {
        messagePage(Object.assign({
          current: this.page.currentPage,// 当前页数
          size: val,// 每页显示多少条
          contentId: this.contentId,
          ascs: 'send_time'
        })).then(response => {
          if (response.data.code == 0) {
            var record = response.data.data.records;
            this.page.currentPage = response.data.data.current;
            this.page.pageSize = response.data.data.size;
            this.page.total = response.data.data.total;
            this.putList(record);
          }
        })
      },
      goBack() {
        this.$router.go(-1);
      },
      sendMessage() {
        if (!this.feedBackContent) {
          this.$message({
            message: '请先填写反馈内容',
            type: 'warning'
          });
          return;
        }
        var messageForm = {
          content: this.feedBackContent,
          senderId: this.userInfo.userId,
          contentId: this.contentId,
          fileId: this.fileId
        };
        newslevyMessage(messageForm).then(response => {
          if (response.data.code == 0) {
            this.$notify({
              title: "成功",
              message: "发送成功",
              type: "success",
              duration: 2000
            });
            this.getMessage();
            this.feedBackContent = '';
            this.fileId = null;
            this.fileList = [];
          }
        });
      },
      // 消息附件上传
      submitUpload(param) {
        const formData = new FormData();
        formData.append(param.file.uid, param.file);
        UploadFile(formData, {fileType: '2'}).then(response => {
          if (response.data.code == 0) {
            this.fileId = response.data.data;
            this.fileList = [{name: param.file.name, url: ''}];
            this.filenametemp = param.file.name;
            this.$notify({
              title: "成功",
              message: "上传成功",
              type: "success",
              duration: 2000
            });
          }
        }).catch(response => {
          this.fileList = [];
          this.$notify({
            title: "失败",
            message: "上传失败",
            type: "error",
            duration: 2000
          });
        })
      },
      fileChange(file) {
      },
      handleRemove(file, fileList) {
        this.fileId = null;
      },
      handlePreview(file) {
        filedownload(this.fileId).then(response => {
          if (response.status == 200) {
            this.download(response.data, this.filenametemp)
          }
        }).catch((error) => {
        })
      },
      // 下载文件
      download(data, filename) {
        if (data == null) {

        } else {
          let url = window.URL.createObjectURL(new Blob([data]));
          let link = document.createElement('a');
          link.style.display = 'none';
          link.href = url;
          link.setAttribute('download', filename);
          document.body.appendChild(link);
          link.click()
        }
      },
      getfilename(fileId) {
        return new Promise((resolve, reject) => {
          getfileinfo(fileId).then(response => {
            if (response.data.code == 0) {
              if (response.data.data != null) {
                var filenametemp = response.data.data.fileName + "." + response.data.data.extend;
                resolve(filenametemp);
              }
            }
          })
        })
      },
    }
  }
</script>
<style lang="scss" scoped>
  .head-title {
    color: rgb(2, 2, 2);
    text-align: left;
    display: inline;
  }

  .head-explain {
    color: #333;
    text-align: left;
    display: inline;
    font-size: 0.5rem;
  }

  .head-button {
    float: right;
  }

  .chatbox {
    /*height: 300px;*/
    width: 100%;
    border: 1px solid #d2d2d2;
    border-width: 1px 0;
    /*overflow-y: auto;*/
    padding-bottom: 30px;
  }

  .msg1 {
    height: 20px;
    width: 17px;
    margin-left: 10px;
  }

  .collapse-title {
    margin-top: 2rem;
    text-align: center;
    border-top: 1px solid #dedbdb;
    border-bottom: 1px solid #dedbdb;
    margin-top: 0px;
  }

  .collapse-title-text {
    color: #4297dc;
    display: inline-block;
    font-size: 15px;
    font-weight: 600;
    margin-left: 0.2rem;
  }

  .collapse-title-img {
    width: 1.2rem;
    position: relative;
    top: 0.25rem;
  }

  .showall {
    padding: 10px;
    height: 177px; /*默认高度*/
    overflow: hidden;
    clear: both;
    margin-top: 6px;
  }

  .showall.active {
    height: auto;
    background: #fff;
    min-height: 150px;
  }

  .imgbtn {
    border-top: 1px solid #ccc;
    margin-top: 6px;
    margin-bottom: 10px
  }

  .fade-enter-active {
    transition: opacity 0.9s ease-out;
  }

  .fade-leave-active {
    transition: opacity 0s ease-out;
  }

  .fade-enter, .fade-leave-to {
    opacity: 0;
  }

  .fade1-enter-active {
    transition: opacity 0.9s ease-out;
  }

  .fade1-enter, .fade1-leave-to {
    opacity: 0;
  }

  .form-group {
    margin-top: 2rem;
  }

  .form-label {
    font-weight: 600;
    margin-right: 2rem;
  }

  .form-padding {
    padding-left: 43px;
  }

  .form-label-small {
    font-size: 14px;
    margin-right: 12px;
    display: inline-block;
    min-width: 101px;
  }

  .form-submit {
    text-align: center;
  }

  .paginationcss {
    margin-top: 20px;
    float: right;
    margin-right: 28px;
  }
</style>
